<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div button{
				background-color: brown;
			}
			ul{
				border: 2px solid red;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
		//空元素的问题
		 $(function(){ 
			$("#add").click(function(){
				$(this).appendTo($("#d"));
				let n=window.prompt("请输入一种新水果:");
				$("#fruit").append("<li>"+n+"</li>");
			}); 
			//绑定的事件新增元素无效
			$("#fruit").on("mouseover","li",function(){
				$(this).css("font-size","50px");
			}).on("mouseout","li",function(){
				$(this).css("font-size","15px");
			});
			
			$("#add2").click(function(){
				//$(this).after("<img src='../day7/img/3.jpg'/>");
				let i=$("<img/>").attr("src","../day7/img/3.jpg");
				$(this).before(i);
			});
			$("#clear").click(function(){
				//$("#fruit").empty();
				//$("#fruit").remove();
				//删除第一个li
				//$("#fruit").find("li:eq(0)").remove();
				//$("#fruit li:eq(0)").remove();
				$("#fruit li:not(:first)").remove();
			});
		 });
		</script>
	</head>
	<body>
		<h2>常见的水果</h2>
		<ul id="fruit">
			<li>桃子</li>
			<li>苹果</li>
			<li>香蕉</li>
			<li>柿子</li>
			<li>菠萝</li>
		</ul>
		<button type="button" id="add">添加一个</button>
		<button type="button" id="add2">添加一个图片</button>
		<button type="button" id="clear">清空水果</button>
		<div id="d"></div>
	</body>
</html>
